<template>
  <div class="fc_333">
    <div>
      <div class="ub ub-ac ub-pc ub-pj bg-white index-float navList-height navList-ul-width">
        <div @click="changePassengerType(1)" id="navItem_0" :class="passengerType==2?'bg-E':''" class="ub ub-ac ub-pc wd_50 navList-item-height navItem">国内乘机人</div>
        <div @click="changePassengerType(2)" id="navItem_1" :class="passengerType==1?'bg-E':''" class="ub ub-ac ub-pc wd_50 navList-item-height navItem">国际乘机人</div>
      </div>
      <div class="ub ub-ver  list-passenger">
        <div id="guonei" v-show="passengerType==1">
          <div id="guoneiAdd" @click="addguonei" class="ub ub-ac ub-pc ticket-border  navList-height bg-white">
            <img class="ub img5" src="./add.png" />
            <span class="fc_purple margin-l05">新增国内乘机人</span>
          </div>
          <div class="guonei" v-show="guoneilist">
            <div :key="item.piid" v-for="(item,index) in innerList" @click='edit(index)' class="boarding ub ub-ac ub-pc ticket-height ticket-border bg-white">
              <div class="ub ub-f1 ub-ver">
                <div class="ub ub-ac ticket-sheight">
                  <div class="margin-l1">
                    <span>{{item.pilname}}</span>
                    <span class="margin-l05">{{item.pifname}}</span>
                  </div>
                  <div class="bc-9151a3 margin-l05 tilck-people ub ub-ac ub-pc fz06">{{item.pitype}}</div>
                </div>
                <div v-show="item.pitype != '婴儿'" class="ub ub-ac ticket-sheight fz08 mar_t05">
                  <div class="margin-l1">{{item.pinumbertype}}</div>
                  <div class="margin-l05">{{item.pinumber}}</div>
                </div>
              </div>
              <div class="ub ub-ac ub-pe">
                <div><img class="ub img4" src="./arrow_right@2x.png" alt="header-l-icon"></div>
              </div>
            </div>
          </div>
          <div id="guoneiNoB" v-show="!guoneilist">
            <div class="ub ub-fh ub-ver ub-ac">
              <div class="ub"><img class="noBImg" src="./passagers_no.png" /></div>
              <div class=" ub fz08 mar_t1 fc_be">您还没有添加乘机人哟~</div>
            </div>
          </div>
        </div>
        <div id="guowai" v-show="!(passengerType==1)">
          <div id="guowaiAdd" @click="addguowai" class="ub ub-ac ub-pc ticket-border  navList-height bg-white">
            <img class="ub img5" src="./add.png" />
            <span class="fc_purple margin-l05">新增国际乘机人</span>
          </div>
          <div class="guowai" v-show="guowailist">
            <div :key="item.piid" v-for="(item,index) in outterList" @click='edit1(index)' class="boarding ub ub-ac ub-pc ticket-height ticket-border bg-white">
              <div class="ub ub-f1 ub-ver">
                <div class="ub ub-ac ticket-sheight">
                  <div class="margin-l1">
                    <span>{{item.pilname}}</span>
                    <span class="margin-l05">{{item.pifname}}</span>
                  </div>
                  <div class="bc-9151a3 margin-l05 tilck-people ub ub-ac ub-pc fz06">{{item.pitype}}</div>
                </div>
                <div v-show="item.pitype != '婴儿'" class="ub ub-ac ticket-sheight fz08 mar_t05">
                  <div class="margin-l1">{{item.pinumbertype}}</div>
                  <div class="margin-l05">{{item.pinumber}}</div>
                </div>
              </div>
              <div class="ub ub-ac ub-pe">
                <div><img class="ub img4" src="./arrow_right@2x.png" alt="header-l-icon"></div>
              </div>
            </div>
          </div>
          <div id="guowaiNoB" v-show="!guowailist">
            <div class="ub ub-fh ub-ver ub-ac">
              <div class="ub"><img class="noBImg" src="./passagers_no.png" /></div>
              <div class=" ub fz08 mar_t1 fc_be">您还没有添加乘机人哟~</div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="shuoming uhide">
      <div class="scrollContent" data-control="CONTENT" id="ScrollContent_shuoming">
        <div class="ub ub-ver padding-css2">
          <div class="ub mt-1 ">
            <div class="span-1 ub ub-pc ub-ac">■</div>
            <div class="ub ub-f1">乘机人姓名请与登机时所使用的证件上的姓名一致；</div>
          </div>
          <div class="ub mt-1 ">
            <div class="span-1 ub ub-pc ub-ac">■</div>
            <div class="ub ub-f1">如乘机人持护照登机，在确定护照上有中文姓名之后方可使用此中文姓名订票。</div>
          </div>
          <div class="ub mt-1 ">
            <div class="span-1 ub ub-pc ub-ac">■</div>
            <div class="ub ub-f1">乘机人姓名仅支持中文或英文输入，姓名长度为24个字母（12个中文汉字）。</div>
          </div>
          <div class="ub mt-1 ">
            <div class="span-1 ub ub-pc ub-ac">■</div>
            <div class="ub ub-f1">输入英文姓名时，请控制在24个字母内。（儿童不超过20个字母，婴儿不超过14个字母）。</div>
          </div>
          <div class="ub mt-1 ">
            <div class="span-1 ub ub-pc ub-ac">■</div>
            <div class="ub ub-f1">输入中文姓名时，请控制在12个汉字内。（儿童不超过10个汉字，婴儿不超过7个汉字）。如果超过字数限制，请按汉字顺序输入姓名，超过的部分抹去即可，切勿省略中间部分。</div>
          </div>
          <div class="ub mt-1 ">
            <div class="span-1 ub ub-pc ub-ac">■</div>
            <div class="ub ub-f1">如乘机人中文姓名中包含生僻字，请将生僻字及生僻字之后的字用拼音代替；“李小巘”应输入为“李小yan”，“李巘小”应输入为“李yanxiao”。</div>
          </div>
        </div>
      </div>
    </div>
    <div>

    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { mapState } from 'vuex';
export default {
  data: () => {
    return {
      passengerType: 1,
      guoneilist: false,
      guowailist: false,
      innerList: [],
      outterList: []
    }
  },
  methods: {
    changePassengerType: function (index) {
      this.passengerType = index;
      this.$store.commit('setpassengerPage', index)
    },
    addguonei: function () {
      this.$store.commit('setPassenger', null)
      this.$router.push('/addPassenger')
    },
    addguowai: function () {
      this.$store.commit('setPassenger', null)
      this.$router.push('/addPassenger_wai')
    },
    edit: function (index) {
      // alert(11)
      this.$store.commit('setPassenger', this.innerList[index])
      this.$router.push('/addPassenger')
    },
    edit1: function (index) {
      this.$store.commit('setPassenger', this.outterList[index])
      this.$router.push('/addPassenger_wai')
    }
  },
  created: function () {
    this.passengerType = this.passenger.passengerPage;
    this.$store.commit('changeHeader', {
      left: '返回',
      right: '',
      middle: '常用乘机人',
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
    // userInfo登陆后的数据
    let userInfo = this.loginData.userInfo;
    let userId = userInfo.userId;
    let loginToken = userInfo.token.loginToken;
    let userMobile = userInfo.userMobile;
    let content = {
      'userMobile': userMobile,
      'userId': userId
    }
    let data = this.$utils.getUserContent(content);
    data.headers.userId = userId;
    data.headers.loginToken = loginToken;
    this.$store.commit('showLoading');
    this.$http.post(this.$RS.passengerList, data).then(
      function (res) {
        // 响应成功回调
        this.$store.commit('closePop');
        res = res.body
        console.log(res)
        if (res.code === 1000) {
          let resInfo = res.content;
          resInfo.inner.length > 0 ? this.guoneilist = true : this.guoneilist = false;
          resInfo.outter.length > 0 ? this.guowailist = true : this.guowailist = false;
          this.innerList = resInfo.inner;
          this.outterList = resInfo.outter;
        } else {
          console.log('out');
          if (res.code === 2066) {
            this.$router.push('/login')
          }
          this.$store.dispatch('showTx', { text: '您需要重新登录' });
        }
      },
      function (err) {
        // 响应错误回调
        this.$store.commit('closePop');
        this.$store.dispatch('showTx', { text: err.message || '网络错误，请重试' });
      }
    );
  },
  computed: mapState(['loginData', 'passenger'])
}
</script>

<style lang="stylus">
@import '../../stylus/base.styl';
.navList-height
  height: f_times(3);
.noBImg
  margin-top: f_times(3);
  width: f_times(2.5);
.bc-9151a3
  color: #9151a3;
.bc-9151a3
  color: #9151a3;
.tilck-people
  height: f_times(1);
  width: f_times(2);
  background-color: #e0cfe6;
  border-radius: f_times(1);
.ticket-border
  border-bottom: 1px solid #eee;
.ticket-height
  height: f_times(4);
.navList-item-height
  height: f_times(3.5);
</style>